<template>
  <!-- 学校主页 -->
  <div class="schoolindex">
    <MyHead :title="name" style="background-color: #f8f8f8"></MyHead>
    <div class="title-box">
      <div class="school-title flexb">
        <div class="flexb">
          <van-icon name="medal" color="rgb(248 160 75) " size="30" />
          <div>{{ name }}</div>
        </div>
        <div class="ranking" @click="goRanking">查看高校排行</div>
      </div>
      <div class="milestone-box">
        <div class="title">学校活动里程碑</div>
        <div class="schedule-box">
          <div class="icon-img" v-if="milestoneList[5000]">
            <van-icon name="medal" color="#b89b87 " size="20" /> 
            <van-icon name="medal" color="rgb(195 120 120) " size="20" />
            <van-icon name="medal" color="#d34f4f " size="20" />
            <van-icon name="medal" color="rgb(255 141 63) " size="20" />
            <van-icon name="medal" color="#d34f4f " size="20" />
            <van-icon name="medal" color="rgb(255 141 63) " size="20" />
            <van-icon name="medal" color="rgb(255 141 63) " size="20" />
          </div>
          <div>
            <van-progress
              :percentage="percentage"
              :show-pivot="false"
              color="#E44D44"
              stroke-width="10"
            ></van-progress>
          </div>
        </div>
        <div class="flexb data-box">
          <div>当前等级：{{ gradeName }}</div>
        </div>
      </div>
    </div>
    <div class="content">
      <van-tabs
        v-model="activeName"
        background="#E8E8E8"
        title-active-color="#F57373"
      >
        <van-tab title="线下活动" name="a" style="padding-bottom: 50px">
          <div class="content-box" v-if="this.schoolEvents.length >0 ">
            <div
              class="item-box flexb"
              v-for="(item, index) in schoolEvents"
              :key="index"
            >
              <div class="left-box">
                <div class="title">
                  <div class="type-box flexc" v-if="item.eventsTitle">{{ item.eventsTitle }}</div>
                  <div class="title-name">{{ item.title }}</div>
                </div>
                <div v-if="item.mobile_time">活动时间：{{ item.mobile_time }}</div>
              </div>
              <div class="right-box" v-if="item.endtime * 1000 > current_time">
                <van-button
                  round
                  type="info"
                  color="#F57373"
                  @click="goSchoolEvents(item)"
                  >去参与</van-button >
              </div>
              <div class="right-box" v-else>
                <van-button
                  round
                  type="info"
                  color="#999999"
                  @click="onFinish(item)"
                  >已结束</van-button>
              </div>
            </div>
          </div>
          <div v-else>
            <van-empty description="暂无活动" />
          </div>
        </van-tab>
        <van-tab title="防艾资讯" name="b" style="padding-bottom: 50px">
          <div class="content-box" v-if="this.messageList.length > 0">
            <div
              class="item-box flexb"
              v-for="(item, index) in messageList"
              :key="index"  @click="goMessageDetail(item)"
            >
              <div class="left-box">
                <div class="title">
                  <div class="title-name">{{ item.title }}</div>
                </div>
                <div>活动时间：{{ item.create_time }}</div>
                <div>活动单位：{{ item.depart_name }}</div>
              </div>
              <div class="right-box">
                <van-button
                  round
                  type="info"
                  color="#F57373"
                  >查看</van-button
                >
              </div>
            </div>
          </div>
          <div v-else>
            <van-empty description="暂无资讯" />
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      openid: $.cookie("openid"),
      activeName: "a",
      schoolInfo: {},
      name: "",
      depart_code: "",
      messageList: [], //资讯
      schoolEvents:[],//线下活动
      milestoneList :{},//里程碑数据
      selfNum:"", //自身数量
      gradeName:"",//等级
      percentage:"",
      current_time: 0, //当前时间戳
    };
  },
  computed: {},
  methods: {
    /*查看高校排行榜*/ 
    goRanking() {
      this.$router.push({ name: "rankingPage" });
    },

    getGradeName(selfNum, gradeList) {
      for (let key in gradeList) {
        if(selfNum<=key){
          return gradeList[key].grade_name;
          break;
        }
      }
      return null;
    },

    /*学校活动里程碑*/
    async getMilestone(){
      let res = await this.$ajax.milestone({
        openid:this.openid,
        depart_code:this.depart_code
      });
      if (res.code == 1) {
        this.milestoneList = res.data.gradeList;
        this.selfNum = res.data.selfNum;
        this.gradeName =this.getGradeName(this.selfNum, this.milestoneList);
        // this.percentage  = res.data.proportion  / res.data.maxNum; // 百分比 
        this.percentage = res.data.proportion;
        // console.log(this.percentage,'百分比');
      }
    } ,
    
    /*线下活动（列表）*/
    async getSchoolEvents(){
      let res = await this.$ajax.actSigninList({
        openid:this.openid,
        level:"4",
        appoint_code:this.depart_code,
        limits:"99"
      });
      if (res.code ==1) {
        this.schoolEvents = res.data;
      }
     },
    /*线下活动查看*/  
     goSchoolEvents(item){
      console.log(item,'详情');
      var s = item.depart_code + '-'+item.id;
      this.$router.push({name:"eventDetails",query:{s:s}});
     },
    /*资讯查看*/
    goMessageDetail(item) {
      this.$router.push({ name: "messageDetail", query: { id: item.id } });
    },
    /*防艾资讯（列表）*/
    async departmentinformations() {
      let res = await this.$ajax.getdepartmentinformations({
        openid: this.openid,
        depart_code: this.depart_code,
        limit:"99",
      });
      if (res.code == 1) {
        this.messageList = res.data.data;
      }
    },
        /*已结束*/ 
    onFinish(item){
      console.log(item,'结束');
      this.$toast('活动已结束了哟！！！')
    }
  },
  mounted() { 
    this.name = this.$route.query.name; //学校名称
    this.depart_code = this.$route.query.depart_code; //学校编码
    this.getSchoolEvents(); //线下活动
    this.current_time = new Date().getTime(); //当前时间戳
    this.departmentinformations(); //防艾资讯
    this.getMilestone();//里程碑
  },
};
</script>

<style lang="scss" scoped>
.schoolindex {
  width: 100%;
  min-height: 100vh;
  height: 100%;
  background: #f9f9f9;

  .title-box {
    padding: 15px 8px;
    background: linear-gradient(to right, #f44336 50%, #b71c1c);
    .school-title {
      display: flex;
      color: white;
      font-size: 16px;
      text-align: left;
      font-family: SourceHanSansSC-regular;
      font-weight: bold;
      .ranking {
        margin-left: 20px;
        font-size: 12px;
        text-align: left;
        font-family: SourceHanSansSC-regular;
        font-weight: none;
      }
    }
    .milestone-box {
      height: 115px;
      margin: 26px 8px;
      line-height: 20px;
      border-radius: 10px;
      background: #ffeceb;
      padding: 10px;
      line-height: 30px;
      .title {
        color: rgba(16, 16, 16, 1);
        font-size: 12px;
        text-align: left;
        font-family: PingFangSC-medium;
        font-weight: bold;
      }
      .schedule-box {
        .icon-img {
          display: flex;
          justify-content: space-between;
        }
      }
      .data-box {
        color: rgba(16, 16, 16, 1);
        font-size: 12px;
        text-align: left;
        font-family: PingFangSC-regular;
      }
    }
  }
  .content-box {
    background: #f9f9f9;
    .item-box {
      display: flex;
      width: 95%;
      line-height: 25px;
      border-radius: 6px;
      background-color: rgba(255, 255, 255, 1);
      margin: 17px 8px;
      padding: 10px 12px;
      box-sizing: border-box;

      .left-box {
        color: rgba(153, 153, 153, 1);
        font-size: 12px;
        text-align: left;
        font-family: SourceHanSansSC-regular;
        .title {
          display: flex;
          .type-box {
            width: 54px;
            height: 24px;
            border-radius: 4px;
            background-color: rgba(164, 173, 179, 0.1);
            color: rgba(226, 27, 27, 1);
            font-size: 12px;
            font-family: Microsoft Yahei;
            margin-right: 5px;
            font-weight: 500;
          }
          .title-name {
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
            text-align: left;
            font-family: SourceHanSansSC-regular;
            font-weight: bold;
          }
        }
      }
      .right-box {
        display: flex;
        justify-content: right;
        align-items: center;
        .van-button {
          width: 80px;
          height: 30px;
          border-radius: 42px;
          background-color: rgba(255, 163, 43, 1);
          color: rgba(255, 255, 255, 1);
          font-size: 12px;
          text-align: center;
          font-family: Microsoft Yahei;
          border: none;
        }
      }
    }
  }
}
</style>